<template>
  <!--TODO: 默认图片在 cos 上添加 -->
  <movable-area v-if="conversation.conversationID && conversation.type != '@TIM#SYSTEM'" class="t-conversation-item-container">
    <movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove" damping="100"
                  :x="xScale">
      <view class="u-flex" style="width: 100%;background-color:#fff;">
        <view class="avatar-box">
          <image class="t-conversation-item-avatar" :src="setConversationAvatar" @error="handleImageError">
          </image>
          <view class="unread" v-if="conversation.unreadCount !== 0">
            <view class="read-text" v-if="conversation.unreadCount > 99">99+</view>
            <view class="read-text" v-else>{{conversation.unreadCount}}</view>
          </view>
        </view>
        <view class="t-conversation-item-content-text">
          <view class="t-conversation-item-content">
            <label class="tui-conversation-item-name">{{conversationName}}</label>
            <view class="t-conversation-item-info">
              {{timeago}}
            </view>
          </view>
          <view class="tui-conversation-lastMessage">
            <text v-if="conversation.lastMessage.isRevoked">{{lang.chat_recall_message}}</text>
            <text v-else><label v-if="isAtAll" class="red-text">[{{lang.chat_group_notice}}]</label>{{conversation.lastMessage.messageForShow}}</text>
          </view>
        </view>
      </view>
      <!--    <view class="t-conversation-delete" @tap.stop="deleteConversation">删除</view>-->
    </movable-view>
  </movable-area>
</template>

<script>
import {
  caculateTimeago
} from '../../base/common';

export default {
  data() {
    return {
      xScale: 0,
      conversationName: '',
      conversationAvatar: '',
      setConversationAvatar: "",
      isAtAll: false,
      // timeago: '',
    };
  },

  components: {},
  props: {
    conversation: {
      type: Object,
      default: () => {}
    },
    lang: {
      type: Object,
      default: () => {}
    },
    timeago: {
      type: String
    }
  },
  watch: {
    conversation: {
      handler: function(conversation) {
        let lastMessage = conversation.lastMessage.messageForShow;
        //console.log("lastMessage", lastMessage);
        if (lastMessage.indexOf('【群公告】') !== -1) {
          lastMessage = lastMessage.replace('【群公告】', '');
          conversation.lastMessage.messageForShow = lastMessage;
          this.isAtAll = true;
        }
        //console.log("最后消息", conversation);

        // 计算时间戳
        this.setData({
          conversationName: this.getConversationName(conversation),
          setConversationAvatar: this.setConversationAvatarHandler(conversation),
          // timeago: caculateTimeago(conversation.lastMessage.lastTime * 1000, this.lang)
        });
        this.$updateTimeago(conversation);
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    // 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
    getConversationName(conversation) {
      if (conversation.type === '@TIM#SYSTEM') {
        return this.lang.message_group_notify[17];
      }

      if (conversation.type === 'C2C') {
        return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
      }

      if (conversation.type === 'GROUP') {
        return conversation.groupProfile.name || conversation.groupProfile.groupID;
      }
    },

    setConversationAvatarHandler(conversation) {
      if (conversation.type === '@TIM#SYSTEM') {
        return 'https://web.sdk.qcloud.com/component/TUIKit/assets/system.png';
      }

      if (conversation.type === 'C2C') {
        return conversation.userProfile.avatar ||
            'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png';
      }

      if (conversation.type === 'GROUP') {
        return conversation.groupProfile.avatar || "/static/static/assets/gruopavatar.svg";
      }
    },

    deleteConversation() {
      uni.showModal({
        content: '确认删除会话？',
        success: res => {
          if (res.confirm) {
            uni.$TUIKit.deleteConversation(this.conversation.conversationID);
            this.setData({
              conversation: {},
              xScale: 0
            });
          }
        }
      });
    },

    handleTouchMove(e) {
      if (!this.lock) {
        this.last = e.detail.x;
        this.lock = true;
      }

      if (this.lock && e.detail.x - this.last < -5) {
        this.setData({
          xScale: -75
        });
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      } else if (this.lock && e.detail.x - this.last > 5) {
        this.setData({
          xScale: 0
        });
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      }
    },

    $updateTimeago(conversation) {
      if (conversation.conversationID) {
        // conversation.lastMessage.timeago = caculateTimeago(conversation.lastMessage.lastTime * 1000);
        conversation.lastMessage.messageForShow = conversation.lastMessage.messageForShow.slice(0, 15);
      }
      this.setData({
        conversation
      });
    },

    handleImageError() {
      this.setData({
        setConversationAvatar: "/static/static/assets/gruopavatar.svg"
      });
    }

  }
};
</script>
<style>
@import "./index.css";
</style>
